<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<style type="text/css">
			*{
				box-sizing: border-box;
				padding: 0;
				margin: 0;
			}
			#bg-broad{
				width: 370px;
				margin: 10vh auto;
				padding: 10px 0 15px 0;
				box-shadow: 0 0 20px -7px #000;
				background-color: rgba(255,255,255,0.4);
			}
			#login-container{
				/*margin: 10vh auto;
				width: 350px;*/
				width: 90%;
				margin: 0 auto;
				text-align: center;
				padding-bottom: 25px;
				border-bottom: 1px solid #f0f0f0;
			}
			#login-logo{
				width: 250px;
			}
			#login-input-group{
				width: 100%;
				text-align: center;
				padding: 0 15px;
				margin-top: 20px;
			}
			#login-input-group>input{
				width: 100%;
				height: 40px;
				padding-left: 15px;
				font-size: 13px;
				outline: none;
			}
			#login-input-group #login-user{
				border-width: 0;
				border-bottom: 2px solid #ddd;
			}
			#login-input-group #login-user:hover{
				border-bottom-color: #41b53b;
			}
			
			#login-input-group #login-psw{
				border-width: 0;
				border-bottom: 2px solid #ddd;
				margin-top: 10px;
			}
			#login-input-group #login-psw:hover{
				border-bottom-color: #41b53b;
			}
			#login-input-group #login-btn{
				padding: 0;
				border-radius: 5px;
				margin-top: 25px;
				letter-spacing: 5px;
				cursor: pointer;
				/*background-color: #01daa4 ;*/
				background-color: #41b53b;
				border: 1px solid #00b386;
				color: #fff;
				text-align: center;
				transition: all 0.35s;
			}
			#login-input-group #login-btn:hover{
				opacity: 0.8;
			}
			#login-input-group #login-tips{
				width: 100%;
				margin-top: 20px;
				font-size: 12px;
				text-align: left;
				color: #5d5e5d;
			}
			#login-input-group #login-remBox{
				
			}
		
			#login-input-group #login-forgetBox{
				display: inline-block;
				float: right;	
			}
			#login-input-group #login-forgetBox .forgetGroup{
				text-decoration: none;
				color: #5d5e5d;
			}
			#login-input-group #login-forgetBox .forgetGroup:hover{
				text-decoration: underline;
				color: #666;
			}
			#login-container #login-authority{
				display: inline-block;
				padding: 0 5px;
				font-size: 12px;
				background-color: #fff;
				color: #c0c0c0;
				transform: translateY(35px);
			}
			@media only screen and (max-width:370px) {
				#bg-broad{
					width: 320px;
				}	
			}
		</style>
	</head>
	<body>
		
		<div id="bg-broad">
			<div id="login-container">
				<img id="login-logo" src="images/login-img/agritech cloud.jpg"/>
				<div id="login-input-group">
					<input type="text" placeholder="手机号 / 邮箱"/ id="login-user" class="login-input">
					<input type="password" placeholder="密码" id="login-psw"/ class="login-input">
					<input type="button" id="login-btn" value="登陆"/>
					<div id="login-tips">
						<span id="login-remBox">
							<input type="checkbox" />
							<span id="remember">记住帐号</span>
						</span>
						<span id="login-forgetBox">
							<a href="" class="forgetGroup">忘记密码</a>
							<a href="register.html" class="forgetGroup">注册帐号</a>
						</span>
					</div>
				</div>
				<span id="login-authority">
					版权©智慧农业创新团队
				</span>
			</div>
		</div>
		
		
		
		
		<canvas id="canvas" width="" height=""></canvas>
		
	<script type="text/javascript">
		var can = document.getElementById('canvas');
		    can.style.cssText="position:absolute;left:0px;top:0px;z-index:-1;";
		var w = can.width = window.innerWidth;
		var h = can.height = window.innerHeight;
		window.onresize = function(){
		    w = can.width = window.innerWidth;
		    h = can.height = window.innerHeight;
		}
		var ctx = can.getContext('2d');
		/*canvas基本使用方法*/
		/*ctx.beginPath();
		ctx.arc(200,200,50,0,Math.PI*2,false);
		ctx.fillStyle='red';
		ctx.fill();*/
		var centerX = w/2;
		var centerY = h/2;
		can.addEventListener('mousemove',function(ev){
		    var even = ev || window.event;
		    centerX = even.pageX;
		    centerY = even.pageY;
		},true);
		can.addEventListener('mouseout',function(ev){
		    centerX = w/2;
		    centerY = h/2;
		},true);
		function Dot(){
		    this.x = Math.random()*w;
		    this.y = Math.random()*h;
		    this.r = Math.random()*5;
		    this.vx = -0.5 + Math.random()*0.8;
		    this.vy = -0.5 + Math.random()*0.8;
		    this.color = '#e6eaea';
		    //this.color = randomColor();
		}
		function randomColor(){
		    var r = Math.floor(Math.random()*256);
		    var g = Math.floor(Math.random()*256);
		    var b = Math.floor(Math.random()*256);
		    return "rgb("+r+","+g+","+b+")";
		}
		Dot.prototype.draw = function(){
		    ctx.beginPath();
		    ctx.fillStyle = this.color;
		    ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
		    ctx.fill();
		    this.line();
		    this.update();
		}
		Dot.prototype.update = function(){
		      
		    this.x += this.vx;
		    this.y += this.vy;
		    if(this.x<0||this.x>w)
		        this.vx = -this.vx;
		    if(this.y<0||this.y>h)
		        this.vy = -this.vy;
		    
		}
		Dot.prototype.line = function(){
		    var statie = 50;
		    var round = 60;
		    var lineRound = 60;
		    ctx.beginPath();
		    ctx.strokeStyle = '#f0f0f0';
		    
		    if(Math.abs(this.x-(centerX+statie))<round&&Math.abs(this.y-centerY)<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX+lineRound,centerY);
		        ctx.stroke();
		
		    }
		    if(Math.abs(this.x-(centerX-statie))<round&&Math.abs(this.y-centerY)<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX-lineRound,centerY);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-centerX)<round&&Math.abs(this.y-(centerY+statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX,centerY+lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-centerX)<round&&Math.abs(this.y-(centerY-statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX,centerY-lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX-statie))<round&&Math.abs(this.y-(centerY-statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX-lineRound,centerY-lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX+statie))<round&&Math.abs(this.y-(centerY+statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX+lineRound,centerY+lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX+statie))<round&&Math.abs(this.y-(centerY-statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX+lineRound,centerY-lineRound);
		        ctx.stroke();
		    }
		    if(Math.abs(this.x-(centerX-statie))<round&&Math.abs(this.y-(centerY+statie))<round){
		        ctx.moveTo(this.x,this.y);//落笔
		        ctx.lineTo(centerX-lineRound,centerY+lineRound);
		        ctx.stroke();
		    }
		    
		}
		var dots = [];
		var num = 500;
		for(var i = 0 ; i<num ; i++){
		    var oDot = new Dot();
		    dots.push(oDot);
		}
		setInterval(function(){
		    ctx.clearRect(0,0,w,h);
		    for(var i = 0 , len = dots.length ; i<len ; i++){
		        dots[i].draw();
		    }
		
		},1000/60);
	</script>
	
		
	<!--登陆逻辑代码-->
	<script type="text/javascript">
		
	</script>
	</body>
</html>
